<template>
	<div @mouseup="mouseupFn" @mousemove="mousemoveFn">
		<div id="eg">
			<div>size:{{size}}</div>
			<SizeObserver v-model="size" :style="{width:width+extendX+'px',height:height+extendY+'px'}">
				<div id="drag" @mousedown="mousedownFn"></div>
			</SizeObserver>
		</div>
		<ApiTable :data="data" :bind="this"/>
		<CodeShow :code="code"/>
	</div>
</template>

<script>
	import ApiTable from './tools/ApiTable';
	import SizeObserver from '../components/SizeObserver';
	export default{
		name:'SizeObserverEG',
		components:{
			ApiTable,
			SizeObserver
		},
		data(){
			return {
				size:null,
				width:100,
				height:80,
				extendX:0,
				extendY:0,
				data:[
					{
						title:'属性',
						value:[
							{name:'v-model',info:'根据元素大小动态变化,但不会反过来影响元素大小',type:'SizeObj'}
						]
					},{
						title:'事件',
						type:true,
						value:[
							{name:'bear-resize',info:'容器大小改变时触发',type:'SizeObj'}
						]
					},{
						title:'SizeObj',
						type:true,
						value:[
							{name:'width',info:'宽度',type:'Number'},
							{name:'height',info:'高度',type:'Number'}
						]
					},{
						title:'全局事件总线',
						type:true,
						value:[
							{name:'SizeObserver',info:'兼容不支持ResizeObserver时,初始化时隐藏,在第一次显示时调用'}
						]
					}
				]
			};
		},
		computed:{
			code(){
				return `
<template>
	<SizeObserver v-model="size" @bear-resize="listener">
		<!-- 内容 --->
	</SizeObserver>
</template>
<script>
	export default{
		data:function(){
			return {
				size:null //根据元素大小动态变化,但不会反过来影响元素大小
			};
		},
		methods:{
			//元素大小改变时会监听到
			listener:function(sizeObj){
				console.log(sizeObj.width);
				console.log(sizeObj.height);
			}
		}
	};
</${'script'}>
`;
			}
		},
		methods:{
			mousedownFn(e){
				this.drag=true;
				this.startX=e.clientX;
				this.startY=e.clientY;
			},
			mouseupFn(e){
				this.drag=false;
				this.width=this.width+this.extendX;
				this.height=this.height+this.extendY;
				this.extendX=0;
				this.extendY=0;
			},
			mousemoveFn(e){
				if(this.drag){
					this.extendX=e.clientX-this.startX;
					this.extendY=e.clientY-this.startY;
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	#eg{
		margin-left:20px;
		>div:first-child{
			margin:10px 0;
		}
		>.bear-SizeObserver{
			position:relative;
			background:#4d96f2;
		}
	}
	#drag{
		position:absolute;
		width:10px;
		height:10px;
		background:#fff;
		border:2px solid;
		right:-4px;
		bottom:-4px;
		cursor:nwse-resize;
	}
</style>
